import { useState, useEffect } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import { roles } from '@/mocks/roles';
import VoiceChat from '@/components/VoiceChat';
import { motion } from 'framer-motion';

interface RoleDetailProps {
  selectedRole: any;
}

export default function RoleDetail({ selectedRole }: RoleDetailProps) {
  const { id } = useParams<{ id: string }>();
  const navigate = useNavigate();
  const [role, setRole] = useState<any>(null);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    // 查找角色详情
    const findRole = roles.find(r => r.id === parseInt(id || ''));
    
    if (findRole) {
      setRole(findRole);
      setIsLoading(false);
    } else if (selectedRole && selectedRole.id === parseInt(id || '')) {
      setRole(selectedRole);
      setIsLoading(false);
    } else {
      // 如果找不到角色，重定向到角色列表
      navigate('/roles');
    }
  }, [id, selectedRole, navigate]);

  if (isLoading) {
    return (
      <div className="flex flex-col items-center justify-center min-h-[500px]">
        <div className="w-16 h-16 border-4 border-blue-200 border-t-blue-600 rounded-full animate-spin"></div>
        <p className="mt-4 text-gray-600">加载角色信息中...</p>
      </div>
    );
  }

  if (!role) return null;

  return (
    <div className="space-y-8">
      <motion.div 
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.5 }}
      >
        <button 
          onClick={() => navigate('/roles')}
          className="flex items-center text-blue-600 hover:text-blue-800 mb-4"
        >
          <i className="fa-solid fa-arrow-left mr-2"></i>
          返回角色列表
        </button>
      </motion.div>

      <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
        <div className="lg:col-span-1">
          <div className="bg-white rounded-2xl shadow-lg overflow-hidden">
            <div className="relative h-60 overflow-hidden">
              <img 
                src={`https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_16_9&prompt=fantasy%20landscape%20background&sign=9b17ec783b2f623ac6d9cf12ef88cdc8`} 
                alt="背景" 
                className="w-full h-full object-cover"
              />
              <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
            </div>
            
            <div className="px-6 pt-6 pb-8">
              <div className="flex justify-center -mt-24">
                <div className="w-40 h-40 rounded-full border-4 border-white shadow-lg overflow-hidden">
                  <img 
                    src={role.image} 
                    alt={role.name} 
                    className="w-full h-full object-cover"
                  />
                </div>
              </div>
              
              <div className="text-center mt-4">
                <h2 className="text-2xl font-bold text-gray-800">{role.name}</h2>
                <p className="text-gray-600 mt-2">{role.description}</p>
              </div>
              
              <div className="mt-6">
                <h3 className="text-sm font-semibold text-gray-500 uppercase tracking-wider">性格特点</h3>
                <p className="mt-2 text-gray-700">{role.personality}</p>
              </div>
              
              <div className="mt-6">
                <h3 className="text-sm font-semibold text-gray-500 uppercase tracking-wider">能力</h3>
                <div className="flex flex-wrap gap-2 mt-2">
                  {role.abilities.map((ability: string, index: number) => (
                    <span 
                      key={index} 
                      className="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm"
                    >
                      {ability}
                    </span>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <div className="lg:col-span-2">
          <VoiceChat selectedRole={role} />
        </div>
      </div>
    </div>
  );
}